<template>
  <div>
    <div class="main-title">
      <img src="/chuneng/img/title-border-1.png" />
      <!-- <div style="text-align: center">
        <svg viewBoxs="0 0 600 500" style="width: 400px">
          <defs>
            <linearGradient
              id="SVGID_1_"
              gradientUnits="userSpaceOnUse"
              x1="0"
              y1="0"
              x2="0"
              y2="90"
            >
              <stop offset="0" style="stop-color: #ffffff" />
              <stop offset="0.9" style="stop-color: #6bdbfa" />
              <stop offset="1" style="stop-color: #6bdbfa" />
            </linearGradient>
          </defs>
          <text
            style="fill: url(#SVGID_1_); font-size: 40px; font-weight: bolder"
            text-anchor="middle"
            x="50%"
            y="50%"
          >
            电池在线故障预警
          </text>
        </svg>
      </div> -->
      <!-- 使用封装的cnsvg组件 -->
      <cn-svg
        :viewbox="'0 0 600 500'"
        :svgstyle="'width: 400px;'"
        :textname="'电池在线故障预警'"
      ></cn-svg>
      <div
        style="
          position: relative;
          transform: translateY(-20px);
          padding-left: 17%;
        "
      >
        <input
          class="cell-input"
          type="select"
          placeholder="请输入电池编号："
          ref="cell-input"
        />
        <div class="time-container">
          <span class="time-part date"></span>
          <span class="time-part time"></span>
        </div>
        <button class="btn-search" @click="init">查询</button>
      </div>
      <!-- 调用组件cnsearch 无法传入单击事件 -->
      <!-- <cn-search @cnclick="init"></cn-search> -->
    </div>
    <div class="main-content">
      <back-1 style="width: 50%">
        <div slot="title">
          <div style="font-size: 28px">故障预警图</div>
          <div style="font-size: 16px">Fault Warning Diagram</div>
        </div>
        <roll-chart
          :option="tdata"
          @change="onChange"
          :step1="10"
          :step2="1"
          :intv="2"
        />
      </back-1>
      <gap style="width: 15%" />
      <back-2 style="width: 100%">
        <div slot="title">
          <div style="font-size: 28px">故障信息一览表</div>
          <div style="font-size: 16px">List of Fault Information</div>
        </div>
        <!-- <roll-chart -->
        <dv-scroll-board
          :config="config"
          style="
            width: 100%;
            height: calc(100% - 10px);
            padding: 20px 0;
            box-size: border-box;
          "
        />
      </back-2>
    </div>
  </div>
</template>

<script>
import { generateXAxis } from "../utils/chart_tools";
import Back1 from "./Back1.vue";
import Back2 from "./Back2.vue";
import Gap from "./Gap.vue";
import RollChart from "./RollChart.vue";
import cnSvg from "./cn-svg.vue";
// import cnSearch from "./cn-search.vue";
import { mapGetters } from "vuex";
export default {
  components: { Back1, Back2, Gap, RollChart, cnSvg },
  data() {
    return {
      config: {
        headerHeight: 90,
        header: ["故障电池编号", "故障类型", "故障等级"],
        data: [],
      },
      tdata: {},
      all_series: [],
      ttdata: null,
    };
  },
  computed: {
    ...mapGetters(["cell_data"]),
  },
  watch: {
    // eslint-disable-next-line
    cell_data(val) {
      this.init();
      this.onChange();
    },
  },
  methods: {
    init() {
      // let cell = this.$refs["cell-input"].value;
      // notify.notify(cell, 1)
      // let data;
      // if (cell === "") {
      //   data = this.cell_data[0];
      // } else {
      //   try {
      //     cell = parseInt(cell);
      //   } catch {
      //     // notify.notify("请输入正确的电池串编号", 1);
      //     cell = 0;
      //   }
      //   data = this.cell_data[cell % this.cell_data.length];
      // }
      let max_length = 0;
      this.cell_data.forEach((v) => {
        Object.keys(v).forEach((k) => {
          max_length = v[k].length;
        });
      });

      let series = [];
      this.all_series.forEach((s) => {
        series.push({
          name: s,
          type: "line",
          showSymbol: false,
          data: [],
        });
      });
      for (let idx = 0; idx < max_length; idx += 1) {
        this.cell_data.forEach((cell) => {
          let cur = cell["预警"][idx];
          if (Object.keys(cur).length > 0) {
            let e = cur["描述"];
            let curs;
            if (series.findIndex((s) => s.name === e) >= 0) {
              curs = series.find((s) => s.name === e);
            } else {
              curs = {
                name: e,
                type: "line",
                showSymbol: false,
                data: [],
              };
              series.push(curs);
              this.all_series.push(e);
            }
            /* eslint-disable */
            while (true) {
              if (curs.data.length >= idx) {
                break;
              }
              curs.data.push("0级");
            }
            curs.data.push(cur["等级"] + "级");
            // console.log(cur['等级'])
          }
        });
      }
      // console.log(data[])
      if (series.length === 0) {
        series.push({
          name: "温度故障",
          data: Array(max_length).fill("0级"),
          type: "line",
          showSymbol: false,
        });
        this.all_series.push("高温预警");
      } else {
        series.forEach((sub) => {
          while (true) {
            if (sub.data.length >= max_length) {
              break;
            }
            sub.data.push("0级");
          }
        });
      }
      // console.log(series);

      try {
        // let r = Math.random() * 4;

        let opt = {
          legend: {
            data: series.map((v) => v.name),
            // 设置图例字体大小与颜色
            textStyle: {
              color: "white",
              fontSize: 15,
            },
          },
          xAxis: generateXAxis(max_length),
          series: series,
          // nolabel为真,不显示纵坐标名称,且纵坐标显示单位
          yAxis: {
            data: ["0级", "1级", "2级", "3级"],

            // name: label +'\n('+ unit +')',
            // 设置 Y轴坐标轴名称

            nameLocation: "middle",
            nameRotate: 90,
            nameGap: 60,
            nameTextStyle: {
              color: "#ffffff",
              align: "center",
              verticalAlign: "top",
              fontSize: 15,
            },
            splitLine: {
              show: false,
            },
            axisPointer: {
              snap: false,
            },
          },
        };
        this.tdata = opt;
      } catch (e) {
        console.log(e);
      }
    },
    onChange() {
      let configdata = [];
      this.cell_data.forEach((item, index) => {
        let data = item["预警"];
        // console.log(data)
        data = data[data.length - 1];
        if (Object.keys(data).length > 0) {
          // console.log(idata);
          configdata.push([`${index + 1}#`, data["描述"], data["等级"]]);
        }
      });
      this.config = {
        headerHeight: 90,
        header: ["故障电池编号", "故障类型", "故障等级"],
        data: configdata,
      };
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
.dv-scroll-board .header-item {
  text-align: center;
}
.dv-scroll-board .header {
  font-size: 26px;
  font-weight: bolder;
  background-color: unset !important;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}
.dv-scroll-board .rows {
  height: 500px !important;
  overflow-y: auto;
}
.dv-scroll-board .rows {
  border-bottom: 2px solid white;
}
.dv-scroll-board .row-item {
  background-color: unset !important;
}
.dv-scroll-board .ceil {
  text-align: center;
  color: black;
  font-size: 22px;
}
</style>